<template>
  <div class="live-stream">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">实时画面</h3>
      <!-- 功能按钮组 -->
      <div class="function-btn-group">
        <!-- 刷新 -->
        <div class="function-btn-item">
          <img class="function-btn-icon refresh" :src="refreshIcon" alt="刷新">
          <div class="function-btn-item-text">刷新</div>
        </div>
        <!-- 全屏 -->
        <div class="function-btn-item">
          <img class="function-btn-icon" :src="fullScreenIcon" alt="全屏">
          <div class="function-btn-item-text">全屏</div>
        </div>
        <!-- 暂时未知功能 -->
        <div class="function-btn-item">
          <img class="function-btn-icon" :src="unknownIcon" alt="未知功能">
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <!-- 名称 -->
      <div class="live-name">
        <img class="live-name-icon" :src="liveNameIcon" alt="无人机">
        <div class="name-text">Matrice 350 RTK  机场相机</div>
      </div>
      <!-- 画面容器 -->
      <div class="live-stream-container">
        <!-- 画面本身 -->
        <div class="live-stream-item">
          <img class="live-stream-item-img" :src="liveStreamImg" alt="实时画面">
        </div>
        <!-- 自适应按钮 -->
        <div class="live-stream-item-adapt-btn">自适应</div>
        <!-- 边角装饰 -->
        <div class="live-stream-item-corner1"></div>
        <div class="live-stream-item-corner2"></div>
        <div class="live-stream-item-corner3"></div>
        <div class="live-stream-item-corner4"></div>
      </div>
      <!-- 功能按钮 -->
      <div class="function-btn">
        <!-- 收起面板 -->
        <div class="function-btn-item">
          <img class="function-btn-icon" :src="foldPanelIcon" alt="收起面板">
          <div class="function-btn-item-text">收起面板</div>
        </div>
        <!-- 画面切换 -->
        <div class="function-btn-item">
          <img class="function-btn-icon" :src="switchPanelIcon" alt="画面切换">
          <div class="function-btn-item-text">画面切换</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import refreshIcon from '@/assets/icons/icon_refresh.png' // 刷新icon
import fullScreenIcon from '@/assets/icons/icon_fullscreen.png' // 全屏icon
import unknownIcon from '@/assets/icons/icon_unknown1.png' // 未知功能icon
import liveNameIcon from '@/assets/images/dashboard_warning_info_UAV.png' // 无人机icon
import foldPanelIcon from '@/assets/icons/icon_fold_up_panel.png' // 收起面板icon
import switchPanelIcon from '@/assets/icons/icon_switch_screen.png' // 画面切换icon

const liveStreamImg = ref('https://s21.ax1x.com/2025/07/12/pVlNQtH.png') // 实时画面

</script>

<style lang="scss" scoped>
.live-stream {
  width: 404px;
  height: 371px;
  background: url('@/assets/images/monitor_real_time_display_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }

    // 功能按钮组
    .function-btn-group {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      .function-btn-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        & + .function-btn-item {
          margin-left: 25px;
        }
        .function-btn-icon {
          width: auto;
          height: 13px;
          &.refresh {
            width: auto;
            height: 17px;
            position: relative;
            top: -1px;
          }
        }
        .function-btn-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 22px;
          color: rgba(175, 215, 230, 1);
          margin-left: 6px;
        }
      }
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    padding: 28px 16px 31px;
    box-sizing: border-box;
    // 名称
    .live-name {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      .live-name-icon {
        width: 15px;
        height: 15px;
        margin-right: 6px;
      }
      .name-text {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 22px;
        color: rgba(0, 255, 244, 1);
      }
    }
    // 画面容器
    .live-stream-container {
      position: relative;
      width: 373px;
      height: 209px;
      background: rgba(7, 44, 54, 1);
      border: 1px solid rgba(90, 120, 140, 1);
      margin-bottom: 16px;
      // 画面本身
      .live-stream-item {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      // 自适应按钮
      .live-stream-item-adapt-btn {
        position: absolute;
        bottom: 16px;
        right: 16px;
        z-index: 2;
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
        border: 2px solid rgba(20, 109, 142, 1);
        padding: 3px 8px;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
      }
      // 边角装饰
      .live-stream-item-corner1 {
        position: absolute;
        top: -1px;
        left: -1px;
        z-index: 2;
        width: 14px;
        height: 14px;
        border-top: 2px solid rgba(0, 255, 244, 1);
        border-left: 2px solid rgba(0, 255, 244, 1);
      }
      .live-stream-item-corner2 {
        position: absolute;
        top: -1px;
        right: -1px;
        z-index: 2;
        width: 14px;
        height: 14px;
        border-top: 2px solid rgba(0, 255, 244, 1);
        border-right: 2px solid rgba(0, 255, 244, 1);
      }
      .live-stream-item-corner3 {
        position: absolute;
        bottom: -1px;
        left: -1px;
        z-index: 2;
        width: 14px;
        height: 14px;
        border-bottom: 2px solid rgba(0, 255, 244, 1);
        border-left: 2px solid rgba(0, 255, 244, 1);
      }
      .live-stream-item-corner4 {
        position: absolute;
        bottom: -1px;
        right: -1px;
        z-index: 2;
        width: 14px;
        height: 14px;
        border-bottom: 2px solid rgba(0, 255, 244, 1);
        border-right: 2px solid rgba(0, 255, 244, 1);
      }
    }
    // 功能按钮
    .function-btn {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      .function-btn-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        .function-btn-icon {
          width: 13px;
          height: auto;
          margin-right: 6px;
        }
        .function-btn-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(175, 215, 230, 1);
        }
      }
    }
  }
}
</style>